<template>
    <div class="container box">
        <!-- 查询表单 -->
        <div class="search_form">
            <div>
                <el-input v-model="searchForm.configName" size="mini" clearable placeholder="请输入参数名称"></el-input>
                <!-- <el-input v-model="searchForm.roleCode" size="mini" clearable placeholder="请输入权限字符"
                    class="roleCode"></el-input>
                <el-select v-model="searchForm.rgroupid" size="mini" clearable placeholder="请选择参数组" class="roleCode">
                    <el-option :label="item.groupName" :value="item.id" v-for="item in roleGroup"
                        :key="item.id"></el-option>
                </el-select> -->
                <el-button class="btn_search" size="mini" type="primary" icon="el-icon-search"
                    @click="searchRoleForm">查询</el-button>
            </div>

            <el-button v-hasPermi="['metaDataManagement:sysConfig:sysConfigInsert']" size="mini" type="primary"
                icon="el-icon-plus" @click="handleAdd">新建</el-button>
        </div>

        <!-- 参数管理表格 -->
        <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false"
            :loading="loading"></BaseTable>

        <!-- 分页 -->
        <div class="card_pagination">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="query.totalNum"
                :current-page="query.startpage" :page-size="query.pagesize" :page-sizes="[10, 15, 30, 50]"
                @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- 添加参数表单 -->
        <el-drawer title="添加参数" :visible.sync="addDrawer" :direction="direction" @close="addDrawerClose" size="30%"
            :before-close="handleClose">
            <div class="form_box">
                <el-form :model="addForm" :rules="rulesAddForm" ref="roleFormRef" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="参数名称" prop="configName">
                        <el-input v-model="addForm.configName"></el-input>
                    </el-form-item>
                    <el-form-item label="参数键名" prop="configKey">
                        <el-input v-model="addForm.configKey"></el-input>
                    </el-form-item>
                    <el-form-item label="参数键值" prop="configValue">
                        <el-input v-model="addForm.configValue"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                  <el-input size="small" maxlength="500" type="textarea" :autosize="{ minRows: 2, maxRows: 3 }"
                    placeholder="请输入备注且最多500个字" v-model="addForm.remark" />
                </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button type="primary" size="small" @click="onSubmit()">保 存</el-button>
            </div>
        </el-drawer>
        <!-- 编辑参数 -->
        <el-drawer title="修改参数" :visible.sync="editDrawer" :direction="direction" size="30%" @close="closeEditDrawer"
            :before-close="handleClose">
            <div class="content_drawer">
                <el-form ref="form" :model="editForm" label-width="100px" :rules="rulesAddForm">
                    <el-form-item label="参数名称" prop="configName">
                        <el-input v-model="editForm.configName"></el-input>
                    </el-form-item>
                    <el-form-item label="参数键名" prop="configKey">
                        <el-input v-model="editForm.configKey"></el-input>
                    </el-form-item>
                    <el-form-item label="参数键值" prop="configValue">
                        <el-input v-model="editForm.configValue"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="editForm.remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button type="primary" @click="editRole()" size="small">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
  
<script>
import BaseTable from '@/components/BaseTable'

import axios from 'axios'
import Utils from '@/libs/Utils.js'
export default {
  components: {
    BaseTable
  },
  data() {
    return {
      oldValA: {},
      oldValB: {},
      cargotableDataColumns: [
        { prop: 'configName', label: '参数名称' },
        { prop: 'configKey', label: '参数键名' },
        { prop: 'configValue', label: '参数键值' },
        { prop: 'remark', label: '备注' },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', { calss: 'btnClass' },
              [h('el-button', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                },
                on: {
                  click: () => { this.handleEdit(params.row.id) }
                }
              }),
              h('el-button', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                },
                on: {
                  click: () => { this.handleDelete(params.row.id) }
                }
              })
              ])
          }
        }
      ],
      cargotableData: [],
      // tableHeight: window.innerHeight - 210,
      loading: false,
      // 查询表单
      searchForm: {
        configName: '', // 参数名称
        configKey: '' // 参数键名
      },
      // 添加表单数据
      addForm: {
        configName: '', // 参数名称
        configKey: '', // 参数键名
        configValue: '',
        remark: ''
      },
      // 添加表单验证规则
      rulesAddForm: {
        configName: [
          { required: true, message: '请输入参数名', trigger: 'blur' }
        ],
        configKey: [
          {
            required: true,
            message: '请输入权限字符',
            trigger: 'blur'
          }
        ],
        configValue: [
          {
            required: true,
            message: '请选择参数组',
            trigger: 'change'
          }
        ]
      },
      // 编辑表单
      editForm: {
        configName: '', // 参数名称
        configKey: '', // 参数键名
        configValue: '',
        remark: ''
      },
      // 添加
      addDrawer: false,
      // 编辑
      editDrawer: false,
      // 方向
      direction: 'rtl',
      // 树形控件的绑定对象
      treeProps: {
        children: 'children',
        label: 'nodeName'
      },
      // 默认选中的节点数据
      defkey: [],
      query: {
        startpage: 1,
        pagesize: 10,
        totalNum: 0 // 总条数
      },
      roleGroup: [], // 参数组数据
      // 菜单列表 查找用户
      goUser: {
        id: '',
        menuname: ''
      },
      newArr: [],
      btnId: [] // 按钮id
    }
  },

  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    }
  },
  async activated() {
  },
  methods: {

    // 查询表单
    async searchRoleForm() {
      // console.log(this.searchForm)
      this.loading = true
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/sysConfig/queryAll?startpage=${this.query.startpage}&pagesize=${this.query.pagesize}&totalNum=${this.query.totalNum}&configName=${this.searchForm.configName}`
      )
      if (res.data.code != '0000') {
        this.loading = false
        return this.$message.error(res.data.msg)
      }
      this.loading = false
      this.cargotableData = res.data.data['pages']
      this.query.totalNum = res.data.data['totalNum'] // 总条数
      this.query.startpage = res.data.data['pageNum'] // 当前页
    },
    // 添加参数显示抽屉
    handleAdd() {
      this.addDrawer = true
      this.addForm = {
        configName: '', // 参数名称
        configKey: '', // 参数键名
        configValue: '', // 参数键值
        remark: ''
      }
    },
    // 添加参数提交
    onSubmit() {
      this.$refs['roleFormRef'].validate(async valid => {
        if (valid) {
          const res = await this.$http.post(
            `/${this.$ServiceName}/api/external/sysConfig/insert`,
            this.addForm
          )

          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.$message.success(res.data.msg)
          this.addDrawer = false
          this.searchRoleForm()
        } else {
          return false
        }
      })
    },
    // 根据id编辑参数数据
    async handleEdit(id) {
      console.log(id);
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/sysConfig/queryById?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }

      this.editForm = res.data.data
      this.editDrawer = true
    },
    // 根据id删除用户参数
    async sub(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/sysConfig/delete?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success('删除成功')
      this.searchRoleForm()
    },

    // 监听pageSize改变事件
    async handleSizeChange(val) {
      this.query.pagesize = val
      this.searchRoleForm()
    },
    // 分页 监听页码值改变
    async handleCurrentChange(val) {
      this.query.startpage = val
      this.searchRoleForm()
    },
    // 抽屉关闭提示
    handleClose(done) {
      let oldV = {}
      let newV = {}
      if (this.addDrawer) {
        oldV = this.oldValA
        newV = this.addForm
      }
      if (this.editDrawer) {
        oldV = this.oldValB
        newV = this.editForm
      }
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => { })
      } else {
        done()
      }
    },
    // 修改参数
    async editRole() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const params = {}
          params.id = this.editForm.id
          params.configName = this.editForm.configName
          params.configKey = this.editForm.configKey
          params.configValue = this.editForm.configValue
          params.remark = this.editForm.remark
          const res = await this.$http.put(
            `/${this.$ServiceName}/api/external/sysConfig/update`,
            params
          )
          // console.log(res)
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.$message.success('修改成功！')
          this.searchRoleForm()
          this.editDrawer = false
        }
      })
    },
    // 获取el-treebind为true的id
    treeDataGetnode(data) {
      var res = []
      // var dataRes = [];
      var child = function(v) {
        if (typeof v.children !== 'undefined' && v.children.length > 0) {
          for (var i = 0; i < v.children.length; i++) {
            if (v.children[i].bind) {
              res.push(v.children[i].id)
              child(v.children[i])
            }
          }
        }
      }
      for (var k = 0; k < data.length; k++) {
        if (data[k].bind) {
          res.push(data[k].id)
          //  dataRes.push({resourceId:v.children[i].id,nodeType:v.children[i].nodeType})
        }
        if (
          typeof data[k].children !== 'undefined' &&
                    data[k].children.length > 0
        ) {
          child(data[k])
        }
      }
      const set = Array.from(new Set(res))
      // let set = Array.from(new Set(dataRes));
      console.log(set)
      return set
    },

    getRoleBtn(data) {
      data.forEach(item => {
        if (item.nodeType == '03') {
          this.newArr.push(item.id)
        }
        if (item.children) {
          this.getRoleBtn(item.children)
        }
      })
      console.log(this.newArr)
      const set = Array.from(new Set(this.newArr))
      // console.log(set);
      return set
    },
    // 监听编辑参数关闭事件
    closeEditDrawer() {
      this.defkey = []
      this.editDrawer = false // 关闭窗口
    },
    // 监听添加参数关闭事件
    addDrawerClose() {
      this.$refs.roleFormRef.clearValidate()
    },

    // 根据选择框整体删除
    async handleDelete(id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该参数数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      // console.log('删除整体')
      this.sub(id)
    },
    handleMouseenter() {
      this.checkStrictly = false
      // console.log('移入事件')
    }
  }
}
</script>
  
<style lang="less" scoped>
.container {

    //表单盒子
    .form_box {
        padding: 20px;
        box-sizing: border-box;
    }

    // 查询表单
    .search_form {
        border: 1px solid #ebeef5;
        background-color: #fff;
        color: #303133;
        border-radius: 4px;
        font-size: 14px;
        color: #606266;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;

        .el-input {
            width: 150px;
        }

        .roleCode {
            margin-left: 16px;
        }

        .btn_search {
            margin-left: 16px;
            background-color: #338ce8;
        }
    }

    //操作按钮
    .roleBtn,
    .editBtn,
    .deleteBtn {
        font-size: 13px;
        color: #606266;
        border-color: transparent;
        background: transparent;
    }

    // 抽屉头部样式

    /deep/ .el-drawer__header {
        font-size: 16px;
        color: #303133;
        background-color: #f5f7fa;
        margin-bottom: 0 !important;
        height: 50px;
        line-height: 50px;
        padding: 0 16px !important;
    }

    /deep/.el-drawer__close-btn {
        display: none;
    }

    .right_title {
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        color: #606266;
        height: 41px;
        line-height: 41px;
        background-color: #f5f7fa;
        border: 1px solid #e1e4eb;
    }

    /deep/ .el-button--primary {
        background-color: #338ce8;
        border-color: #338ce8;
    }

    //修改参数提交按钮
    /deep/ .demo-drawer__footer {
        text-align: right;
        padding-right: 1rem;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 50px;
        z-index: 100;
    }

    //参数成员分页盒子
    .record {
        padding: 10px 20px;
        font-size: 13px;
        color: #909399;
        text-align: right;
        padding-right: 1rem;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /deep/ .el-drawer__body {
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .footer_btn {
        text-align: right;
        height: 50px;
        line-height: 50px;
    }

    //分页
    .card_pagination {
        text-align: right;
        padding: 10px 20px;
        background: #ffffff;
    }

    //   /deep/.el-pagination.is-background .btn-next,
    //   /deep/ .el-pagination.is-background .btn-prev,
    //   /deep/ .el-pagination.is-background .el-pager li {
    //     background: #ffffff;
    //     border: 1px solid #e1e4eb;
    //     border-radius: 3px;
    //     border-radius: 3px;
    //   }
    .search_input {
        height: 50px;
        padding: 0 20px;
        display: flex;
        align-items: center;

        .el-input {
            width: 150px;
        }
    }

    /deep/.el-input el-input-group el-input-group--append {
        width: 191px !important;
    }

    // 查询列表
    .seachRoleList {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 20px;
        border-left: 1px solid #e1e4eb;
        border-right: 1px solid #e1e4eb;
        border-bottom: 1px solid #e1e4eb;

        .el-input {
            width: 131px;
        }
    }
}

.box {
    border: 1px solid #e1e4eb;
    border-radius: 4px 4px 0 0;
    border-top: none;
}

/deep/ .el-tree {
    overflow-y: scroll;
    height: calc(100vh - 200px);
}
</style>
  